<script setup lang="ts">
import { useRoute } from "vue-router";
import VueOfficePdf from "@vue-office/pdf";
//引入相关样式
import { onMounted, ref } from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
import { NLayout } from "naive-ui";
import { useRouterPush } from "@/hooks/common/router";

const { routerBack } = useRouterPush();

const route = useRoute();

const { VITE_OTHER_SERVICE_BASE_URL } = import.meta.env;

const otherUrl: any = JSON.parse(VITE_OTHER_SERVICE_BASE_URL);

const imgUrl = otherUrl.docUrl;

const type = ref("");

onMounted(() => {
  if (route.query.filePath?.includes("pdf")) {
    type.value = "pdf";
  } else {
    type.value = "doc";
  }
});

function renderedPdf() {
  console.log("加载完成");
  loading.value = false;
  empty.value = false;
}

function errorHandlerPdf() {
  console.log("加载失败");
  loading.value = false;
  empty.value = true;
}
// 加载状态
const loading = ref(true);

// 空页面
const empty = ref(false);
</script>

<template>
  <NLayout :native-scrollbar="false">
    <NSpace vertical>
      <BackHeader title="返回" @back-click="routerBack" />
      <!-- pdf -->
      <NSpin
        :show="loading"
        size="large"
        description="加载中..."
      >
        <vue-office-pdf
          v-if="type == 'pdf'"
          :src="imgUrl + route.query.filePath"
          @rendered="renderedPdf"
          @error="errorHandlerPdf"
        />
        <!-- doc -->
        <vue-office-docx
          v-if="type == 'doc'"
          :src="imgUrl + route.query.filePath"
          @rendered="renderedPdf"
          @error="errorHandlerPdf"
        />
      </NSpin>
      <n-empty
        v-show="empty"
        size="large"
        description="该文件暂时无法预览"
        style="position: absolute; top: 30%; left: 46%"
      >
      </n-empty>
    </NSpace>
  </NLayout>
</template>

<style scoped lang="scss">
.bg-layout {
  background: url("@/assets/imgs/edit-bg.png");
  background-size: 100% 100%;
}
</style>
